import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import React, { useEffect, useState } from "react"
import Taro, { useDidShow } from "@tarojs/taro"
import btn1 from "../../assets/images/home_button1.png"
import btn2 from "../../assets/images/home_button2.png"
import swiperText from "../../assets/images/home_text.png"
import swiperImg from "../../assets/images/home_banner.png"
import "./index.scss"
import { checkIsLogin, getUser } from "../../utils"

export default function Home() {
  const [swiperCurrent, setSwiperCurrent] = useState(0)
  //const userInfo = getUser("userInfo")
  //const isAdmin = userInfo?.role != 0

  const [isAdmin,setIsAdmin]= useState(false)
  useDidShow(() => {
    const userInfo = getUser("userInfo")
    if(userInfo && userInfo?.role != 0) {
        setIsAdmin(true)
    }
  })

  const list = [1, 2]
  useEffect(() => {
    Taro.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#000000",
    })
  }, [])
  return (
    <View className="page-home">
      <View className="swiper-point">
        {list.map((item, index) => {
          return <View className={`point ${index === swiperCurrent ? "point-active" : ""}`} key={item}></View>
        })}
      </View>
      <Swiper className="home-swiper" onChange={e => setSwiperCurrent(e.detail.current)}>
        <SwiperItem className="swiper-item">
          <View className="home-banner">
            <Image src={swiperText} className="banner-text"></Image>
            <Image src={swiperImg} className="banner-img"></Image>
            {/* 蒙层 */}
            <View className="banner-mask"></View>
          </View>
        </SwiperItem>
        <SwiperItem className="swiper-item">
          <View className="home-banner">
            <Image src={swiperText} className="banner-text"></Image>
            <Image src={swiperImg} className="banner-img"></Image>
            {/* 蒙层 */}
            <View className="banner-mask"></View>
          </View>
        </SwiperItem>
      </Swiper>
      <View className="btns">
        <Image
          src={btn1}
          className="btn btn-left"
          onClick={() => Taro.navigateTo({ url: "/pages/storeDetail/index" })}
        ></Image>
        <Image
          src={btn2}
          className="btn btn-right"
          onClick={() => {
            if (checkIsLogin()) {
              //修复首次进入小程序是const常量为固定值，无法判断登录后的用户状态值
              //let userInfo = getUser("userInfo")
              //let isAdmin = userInfo?.role != 0
               //{console.log("userInfo.role:"+ userInfo.role + " ,isAdmin:::"+ isAdmin)}
              if (isAdmin) {
                Taro.showToast({
                  title: "管理员暂不能预约，该端口仅对用户开放",
                  icon: "none",
                })
              } else {
                Taro.navigateTo({ url: "/pages/appointment/index" })
              }
            }
          }}
        ></Image>
      </View>
    </View>
  )
}
